<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" href="../fonts/iconfont/iconfont.css" />
    <title>验证</title>
    <style type="text/css">
        body {
            background: #F1f1f1;
        }
        
        .content {
            margin-top: 2.8rem;
        }
        
        .content h3 {
            padding-left: 0.5rem;
        }
        
        .goods {
            margin: 0.8rem 0.5rem;
        }
        
        .goodsImg {
            background: red;
            width: 4rem;
            height: 4rem;
            float: left;
        }
        
        .goodsDetails {
            float: left;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 1rem;
        }
        
        .goodsPrice {
            margin-top: 1rem;
        }
        
        .clear {
            clear: both;
        }
        
        .mobile input,
        .input-sel {
            width: 95%;
            margin-left: 0.5rem;
            border: 1px solid #dddddd;
            border-radius: 5px;
            padding-left: 0.5rem;
        }
        
        .verification {
            margin: 1rem 0;
        }
        
        .verification input {
            width: 60%;
            margin-left: 0.5rem;
            border: 1px solid #dddddd;
            border-radius: 5px;
        }
        
        .flexInput {
            display: flex;
            justify-content: space-between;
        }
        
        .verification .btn {
            flex: 1;
            color: #f5d493;
            background: #222222;
            height: 2.2rem;
            line-height: 2.2rem;
            border-radius: 0;
        }
        
        .btn-send {
            position: fixed;
            bottom: 0;
            color: #f5d493;
            background: #222222;
        }
    </style>
</head>

<body>
    <!-- 头部  s -->

    <header class="aui-bar aui-bar-nav aui-bar-light" style="background: #4e536c;position: fixed;">
        <a class="aui-pull-left aui-btn" onclick="back()">
            <span class="aui-iconfont aui-icon-left" style="color: #FFFFFF;"></span>
        </a>
        <div class="aui-title" style="color: #FFFFFF;">精品验证</div>
    </header>
    <!-- 头部  e -->
    <div class="content">
        <h3>精品信息</h3>

        <div class="goods">
            <div class="goodsImg">
                <img>
            </div>
            <div class="goodsDetails">
                <div class="goodsName">尚爱礼盒</div>
                <div class="goodsPrice">1000.00</div>
            </div>
            <div class="clear"></div>
        </div>

        <div class="msg">
            <div class="mobile">
                <label class="aui-margin-10 aui-font-size-16">输入会员手机号</label>
                <input type="text" placeholder="请输入会员手机号码" value="">
            </div>

            <div class="verification">
                <label class="aui-margin-10 aui-font-size-16">输入验证码</label>
                <div class="flexInput">
                    <input type="text" placeholder="请输入验证码" class="aui-padded-l-10">
                    <input type="button" value="发送验证码" class="btn" onclick="sendCode(this)">
                </div>
            </div>
        </div>
        <div class="staff">

            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                    <label class="aui-margin-10 aui-font-size-16">选择销售员工</label>
                </div>
                <div class="aui-list-item-input input-sel">
                    <select>
                        <option>Option1</option>
                        <option>Option2</option>
                        <option>Option3</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <input type="button" class="aui-btn aui-btn-block btn-send" value="验证" />
    </div>
    <script src="../js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="../js/aui-toast.js" charset="utf-8"></script>
    <script src="../js/comment.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var obj = JSON.parse(window.localStorage.getItem('obj'))
        var clock = '';
        var nums = 3;
        var btn;

        function sendCode(thisBtn) {
            // $.ajax({
            //     type: "post",
            //     url: url + "station/stationList?storeSn=02008",
            //     data: data,
            //     success: function(result) {
            //         if (result.code == 200) {

            //         }
            //     },
            //     error: function(err) {

            //     }
            // });
            showDefaultMsg('success'); //如果请求成功，显示发送验证码成功
            btn = thisBtn;
            btn.disabled = true; //将按钮置为不可点击
            btn.value = nums + '秒后可重新获取';
            clock = setInterval(doLoop, 1000); //一秒执行一次
        }

        function doLoop() {
            nums--;
            if (nums > 0) {
                btn.value = nums + '秒后可重新获取';
            } else {
                clearInterval(clock); //清除js定时器
                btn.disabled = false;
                btn.value = '重新发送验证码';
                nums = 3; //重置时间
            }
        }

        var toast = new auiToast({});

        //提示发送成功和失败
        function showDefaultMsg(type) {
            switch (type) {
                case "success":
                    toast.success({
                        title: "短信发送成功",
                        duration: 1500
                    });
                    break;
                case "fail":
                    toast.fail({
                        title: "短信发送失败",
                        duration: 1500
                    });
                    break;
            }
        }



        $('.btn-send').touchend(function() {
            window.location.href = 'verify_success.html';
        })
    </script>
</body>

</html>